output {
	position: relative;
	box-sizing: border-box;
	display: grid;
	align-items: center;
	flex-shrink: 0;
	min-height: 48px;
	padding: 6px 10px;
	margin: 10px;
	background: $ui-bg-color;
	border-style: solid;
	border-width: 2px 2px 2px 60px;
	border-radius: 4px;

	&::before {
		@extend %icons-font;

		position: absolute;
		top: 6px;
		left: -45px;
		font-size: 32px;
		color: rgba(#fff, .9);
		text-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
	}

	> span {
		font-size: $font-h4-size;
	}

	.msg-buttons {
		margin-top: 4px;
		text-align: right;

		button {
			font-size: $font-h4-size;

			&:not(:first-child) {
				margin-left: 10px;
			}
		}
	}

	.msg-details {
		overflow: hidden;

		ul {
			@extend %webkit-scrollbar;

			max-height: 300px;
			overflow-y: auto;
		}

		li {
			white-space: pre-line;

			&:only-child {
				margin-left: 0;

				&::before {
					display: none;
				}
			}
		}
	}

	&.collapsible {
		grid-template: 16.8px 1fr / max-content 1fr;
		grid-gap: 6px 10px;

		@if $ui-transitions {
			transition: grid-template-rows $ui-transition-duration,
						grid-row-gap $ui-transition-duration;
		}

		.link-action {
			line-height: 14px;

			.arrow-down,
			.arrow-up {
				margin-left: 3px;
				pointer-events: none;
			}
		}

		.msg-buttons,
		.msg-details {
			grid-column: 1 / -1;
		}

		.msg-details {
			padding-top: 6px;
			border-top: 1px dashed;
			border-color: inherit;
			opacity: 1;
			transform: scaleY(1) translateY(0);

			@if $ui-transitions {
				transition: padding-top $ui-transition-duration,
							opacity $ui-transition-duration,
							transform $ui-transition-duration;
			}
		}

		&.collapsed {
			grid-template-rows: 32px 0fr;
			grid-row-gap: 0;

			.msg-details {
				padding-top: 0;
				border-top: none;
				opacity: 0;
				transform: scaleY(0) translateY(50%);
			}
		}
	}

	&.msg-bad {
		border-color: $msg-bad-color;

		&::before {
			content: $zi-circle-warning-filled;
		}

		.msg-buttons {
			button {
				color: $msg-bad-btn-color;
				background-color: transparent;
				border-color: $msg-bad-color;

				&:hover {
					color: $btn-color;
					background-color: $btn-alt-hover-bg-color;
					border-color: $btn-alt-hover-border-color;
				}

				&:active,
				&:focus {
					color: $btn-color;
					background-color: $btn-alt-focus-bg-color;
					border-color: $btn-alt-focus-border-color;
				}
			}
		}
	}

	&.msg-good {
		border-color: $msg-good-color;

		&::before {
			content: $zi-circle-check-filled;
		}
	}

	&.msg-info {
		border-color: $msg-info-color;

		&::before {
			content: $zi-circle-info-filled;
		}
	}

	&.msg-warning {
		border-color: $msg-warning-color;

		&::before {
			content: $zi-circle-warning-filled;
		}
	}

	&.msg-global {
		max-width: 475px;
		margin: 5% auto 0;
	}

	&.msg-global-footer {
		position: fixed;
		bottom: 0;
		z-index: 1000;
		display: none;
		padding-top: 4px;
		padding-bottom: 4px;
		margin: 0;
		min-height: 37px;

		&::before {
			top: 1px;
		}
	}
}
